<template>
  <div class="body">
    <div class="yunzaoqi">
      <van-nav-bar title="孕早期" left-arrow @click-left="onClickLeft"/>
    </div>
    <div class="aa">

    </div>
    <div class="bb">
      <div class="jieshao" v-for="(item,i) in list" :key="i">
        <div class="left">{{item.img}}</div>
        <div class="right">
          <div class="p1">{{item.name}}</div>
          <div class="p2">{{item.id}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "FirsterTrimester",
  data() {
    return {
      active: 0,
      list: []
    };
  },
  mounted() {
    var that = this;
    axios({
      url: "http://www.zhulei.com/api"
    }).then(function(data) {
      that.list = data.data.list;
     
    });
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.boby {
  display: flex;
}
.aa{
  clear:both;
  height:20px;
  overflow: hidden;
}
.yunzaoqi {
  width: 100%;
  height: 20px;
  position: fixed;
  top: 0px;
}
.jieshao {
  display: flex;
  margin-top: 20px;
  padding-bottom: 20px;
  flex-direction: row;
  left: 0px;
  top: 331px;
  width: 375px;
  height: 150px;
  line-height: 20px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;
}
.left {
  margin-left: 15px;
  margin-top: 20px;
  width: 100px;
  height: 100px;
  line-height: 20px;
  border-radius: 10px;
  background-color: red;
  text-align: center;
 
}
.right {
  margin-top: 20px;
  margin-left: 20px;
  left: 8px;
  top: 362px;
  height: 88px;
}
.right .p1 {
  left: 126px;
  top: 131px;
  width: 64px;
  height: 22px;
  color: rgba(102, 102, 102, 1);
  font-size: 16px;
  text-align: left;

}
.right .p2 {
  left: 153px;
  top: 416px;
  width: 220px;
  height: 21px;
  line-height: 15px;
  background-color: rgba(242, 242, 242, 1);
  color: rgba(172, 170, 170, 1);
  font-size: 10px;
  text-align: left;

}
</style>
